<template>
  <div>
    <!-- 平台设备管理首页 -->
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/sceneManage' }">场图管理</el-breadcrumb-item>
        <el-breadcrumb-item>机器人管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="m-t">
      <!-- 操作按钮 -->
      <el-row type="flex"
              justify="start"
              class="m-b">
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-circle-plus-outline"
                   @click="addDevice">添加
        </el-button>
        <el-button type="danger"
                   size="mini"
                   icon="el-icon-delete"
                   @click="batchRemove">批量移除
        </el-button>
      </el-row>
      <el-table stripe
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%"
                size="small">
        <el-table-column type="selection"
                         width="55" />
        <el-table-column type="index"
                         label="编号"
                         width="100"
                         align="left"
                         :index="table_index"></el-table-column>
        <el-table-column prop="deviceId"
                         label="设备ID"
                         sortable />
        <el-table-column prop="name"
                         label="设备名称"
                         sortable />
        <el-table-column prop="type"
                         label="设备类型" />
        <el-table-column prop="state"
                         label="状态">
          <template #default="{ row }">
            <!--updateFun(row)updateUsersFun(row)-->
            <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address"
                         label="设备部署地址" />
        <el-table-column prop="description"
                         label="描述" />
        <!-- <el-table-column label="操作"
                         min-width="130"
                         fixed="right"
                         align="center">
          <template #default="{ row }">
            <el-button type="primary"
                       size="mini"
                       @click="viewData(row)"><i class="el-icon-view"></i> 查看数据</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="pages-btn-box m-t">
        <el-pagination :current-page="page.current"
                       :page-size="Number(page.size)"
                       layout="prev, pager, next, jumper"
                       :total="Number(page.total)"
                       @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <!-- <el-row style="text-align: center;margin-top:20px;">
      <el-button type="default"
                 icon="el-icon-back"
                 @click="goBack">返 回</el-button>
    </el-row> -->
    <add-device :show-dialog="showDialogEdit"
                :fieldPatternId="fieldPatternId"
                :form-data="formData"
                @changeVisible="changeVisibleEdit"
                @getList="getList" />
  </div>
</template>

<script>
import addDevice from "./addDevice";
import { formatDate } from "@/utils/utils";
import {deviceList, delDevice } from "@/api/sceneManage";

import store from "@/store/modules/user";

export default {
  name: "Index",
  components: {
    addDevice
  },
  data() {
    return {
      tableData: [],
      page: {
        current: 1,
        size: 10
      },
      formData: {},
      showDialogEdit: false,
      searchForm: {
        type: "",
        state: "",
        search: ""
      },
      fieldPatternId: "",
      typeList: [{ name: "IEQ" }, { name: "PMS" }, { name: "OPT" }],
      stateList: [
        { value: "ONLINE", name: "在线" },
        { value: "OFFLINE", name: "离线" },
        { value: "NEW", name: "入库" },
        { value: "DEPLOYED", name: "已部署" }
      ],
      selectArr: [],
      userInfo: store.state.userInfo,
      curr: 1,
      search: {}
    };
  },
  filters: {
    stateFil(val) {
      switch (val) {
        case "ONLINE":
          return "在线";
        case "OFFLINE":
          return "离线";
        case "NEW":
          return "入库";
        case "DEPLOYED":
          return "已部署";
        default:
          break;
      }
    },
    stateFilter(state) {
      const stateMap = {
        ONLINE: "success",
        OFFLINE: "danger",
        NEW: "",
        DEPLOYED: "warning"
      };
      return stateMap[state];
    }
  },
  mounted() {
    var selectProject = JSON.parse(localStorage.getItem('selectProject'));
    this.fieldPatternId = selectProject.id;
    this.getList();
  },
  methods: {
    table_index(index) {
      return (this.page.current - 1) * this.page.size + index + 1
    },
    dateFormat(row, column) {
      if (column.property === "createTime") {
        return formatDate(new Date(row.createTime));
      } else if (column.property === "updateTime") {
        return formatDate(new Date(row.updateTime));
      }
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.getList();
    },
    changeVisibleEdit(e) {
      this.showDialogEdit = e;
    },
    addDevice() {
      // state.editType = 1;
      this.formData = {};
      this.changeVisibleEdit(true);
    },
    //表格选择事件
    handleSelectionChange(val) {
      this.selectArr = val;
    },
    batchRemove() {
      if (this.selectArr.length == 0) {
        this.$message("请选择要移除的设备");
        return;
      } else {
        this.$confirm("您确定移除选择的设备吗？", "提示", {
          confirmButtonText: " 确 定",
          cancelButtonText: " 取 消",
          type: "warning",
          confirmButtonClass: "el-icon-check",
          cancelButtonClass: "el-icon-close btn-custom-cancel"
        }).then(() => {
          var deviceList = [];
          for (var i = 0; i < this.selectArr.length; i++) {
            deviceList.push(this.selectArr[i].deviceId)
          }
          const data = {
            fieldPatternId: this.fieldPatternId,
            deviceList: deviceList
          };
          delDevice(data)
            .then((res) => {
              this.submitLoading = false;
              if (res["code"] == 200) {
                this.getList();
                this.$message.success("移除成功!");
              } else {
                this.$message(res["msg"]);
              }
            })
        });
      }
    },
    getList(refresh = false) {
      var data = {
        ...this.searchForm,
        fieldPatternId: this.fieldPatternId,
        pageNo: this.page.current,
        pageSize: this.page.size
      };
      if (refresh) {
        data.pageNo = 1;
      }
      deviceList(data).then(res => {
        const data = res.value;
        this.tableData = data.values;
        this.page.total = data.total;
      });
    },
    viewData(row) {
      if (row.type === "IEQ") {}
    },
    changeSearchType(value) {
      if (this.searchForm.type == value) {
        this.searchForm.type = "";
      } else {
        this.searchForm.type = value;
      }
      this.getList();
    },
    changeSearchState(value) {
      if (this.searchForm.state == value) {
        this.searchForm.state = "";
      } else {
        this.searchForm.state = value;
      }
      this.getList();
    }
  }
};
</script>

<style scoped lang="scss">
.topLayout {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.inline {
  // max-width: 300px;
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-search {
  width: 260px;
  min-width: 150px;
  margin-right: 20px;
}

.flexBox {
  display: flex;

  div {
    margin: 0 5px;
    border: 1px solid #aaa;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    color: #aaa;
    cursor: pointer;
  }

  .selected {
    background-color: #1890ff;
    color: #fff;
  }
}
</style>
<style>
.btn-custom-cancel {
  float: right;
  margin-left: 10px;
}
</style>
